<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"><!--<![endif]-->

<head>
	<title>Flakes Example Usage</title>

	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-touch-fullscreen" content="yes">
	<meta charset="UTF-8" />

	<link rel="stylesheet" type="text/css" href="css/all.css">
</head>

<body>
	<!--[if lt IE 7]>
		<p class="chromeframe" style="background:#eee; padding:10px; width:100%">Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p>
	<![endif]-->

	<div class="flakes-frame">

		<div class="flakes-navigation">
			<a href="index.html" class="logo">
				<img src="img/logo.png" width="120">
			</a>

			<ul>
				<li class="title">Category Title</li>
				<li><a href="#">Nav Item 1</a></li>
				<li><a href="#">Nav Item 2</a></li>
				<li><a href="#">Nav Item 3</a></li>
				<li><a href="#">Nav Item 4</a></li>
			</ul>

			<p class="foot">
				Hello <b>John Doe</b><br>
				<a href="">My Account</a> &bullet; <a href="">Logout</a>
			</p>
		</div>

		<div class="flakes-content">

			<div class="flakes-mobile-top-bar">
				<a href="" class="logo-wrap">
					<img src="img/logo.png" height="30px">
				</a>

				<a href="" class="navigation-expand-target">
					<img src="img/site-wide/navigation-expand-target.png" height="26px">
				</a>
			</div>

			<div class="view-wrap">
				<h1>Getting Started</h1>

				<h3>Install dependencies</h3>
				<p><b>Install</b> Dependencies using the "bower install" command. If you don't have the Bower Package Manager, install it using the instructions on their <a href="http://bower.io/">official site</a>.</p>

				<h3>Edit this file</h3>
				<p>Use this <b>example.html</b> as your boilerplate to get your project off the ground. You can obviously also start from scratch if you want.</p>

				<h3>Thats all! Hope you like using Flakes.</h3>

				<br>
				<h2>Example Components</h2>
				<br>
				<div class="grid-2 gutter-40">
					<div class="span-1">
						<fieldset>
							<legend>Personal Information</legend>
							<form>
								<ul>
									<li>
										<label>First Name</label>
										<input type="text">
									</li>
									<li>
										<label>Last Name</label>
										<input type="text">
									</li>
									<li>
										<label>Email Address</label>
										<input type="email" required>
									</li>
									<li>
										<label>Address</label>
										<textarea></textarea>
									</li>
									<li>
										<input type="submit">
									</li>
								</ul>
							</form>
						</fieldset>
					</div>
					<div class="span-1">
						<div class="flakes-search">
							<input class="search-box" placeholder="Search" autofocus>
							<div class="filters">
								<label class="filter-checkbox">
									<input class="checkbox" type="checkbox"> Filter 1
								</label>
								<label class="filter-checkbox">
									<input class="checkbox" type="checkbox"> Filter 2
								</label>
							</div>
						</div>
						<div class="flakes-actions-bar">
							<a class="action button-gray smaller right" href="">Add a product</a>
							<a class="action button-gray smaller right" href="">Export</a>

							<a class="action button-gray smaller" href="">Delete</a>
							<a class="action button-gray smaller" href="">Edit</a>
						</div>
						<table class="flakes-table" style="width:100%">
							<colgroup>
								<col span="1" style="width:20px" />
								<col span="1" style="width:80%" />
							</colgroup>
							<thead>
								<tr>
								  <th><input type="checkbox"></th>
									<th>Product Name</th>
									<th>SKU</th>
								</tr>
							</thead>
							<tbody>
								<tr>
								  <td><input type="checkbox"></td>
								  <td>Dolor Fusce</td>
								  <td>654-1816</td>
								</tr>
								<tr>
								  <td><input type="checkbox"></td>
								  <td>Eu Sem Pellentesque</td>
								  <td>937-5793</td>
								</tr>
								<tr>
								  <td><input type="checkbox"></td>
								  <td>Maecenas</td>
								  <td>682-9676</td>
								</tr>
								<tr>
								  <td><input type="checkbox"></td>
								  <td>Augue Porttitor</td>
								  <td>389-1087</td>
								</tr>
								<tr>
								  <td><input type="checkbox"></td>
								  <td>Dapibus</td>
								  <td>893-7857</td>
								</tr>
								<tr>
								  <td><input type="checkbox"></td>
								  <td>Eleifend</td>
								  <td>1-783-967-8521</td>
								</tr>
								<tr>
								  <td><input type="checkbox"></td>
								  <td>Tincidunt</td>
								  <td>486-7965</td>
								</tr>
								<tr>
								  <td><input type="checkbox"></td>
								  <td>Et</td>
								  <td>462-2201</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>

				<br>
				<br>

				<div class="grid-2 gutter-40">
					<div class="span-1">
						<fieldset class="flakes-information-box">
							<legend>Product Specs</legend>
							<dl>
								<dt>SKU</dt>
								<dd>23-43-4343-13</dd>
							</dl>
							<dl>
								<dt>Initial Stock Level</dt>
								<dd>$314</dd>
							</dl>
							<dl>
								<dt>Cost Price</dt>
								<dd>$1200</dd>
							</dl>
							<dl>
								<dt>Wholesale Price</dt>
								<dd>$1400</dd>
							</dl>
							<dl>
								<dt>Retail Price</dt>
								<dd>$1995</dd>
							</dl>
						</fieldset>
					</div>
					<div class="span-1">
						<form class="grid-form">
							<fieldset>
								<legend>Product Specs</legend>
								<div data-row-span="1">
									<div data-field-span="1">
										<label>SKU</label>
										<input type="text">
									</div>
								</div>
								<div data-row-span="1">
									<div data-field-span="1">
										<label>Initial Stock Level</label>
										<input type="text">
									</div>
								</div>
								<div data-row-span="1">
									<div data-field-span="1">
										<label>Cost Price</label>
										<input type="text">
									</div>
								</div>
								<div data-row-span="1">
									<div data-field-span="1">
										<label>Wholesale Price</label>
										<input type="text">
									</div>
								</div>
								<div data-row-span="1">
									<div data-field-span="1">
										<label>Retail Price</label>
										<input type="text">
									</div>
								</div>
							</fieldset>
						</form>
					</div>
				</div>

			</div>
		</div>
	</div>


	<link rel="stylesheet" type="text/css" href="bower_components/gridforms/gridforms/gridforms.css">

	<script src="bower_components/jquery/dist/jquery.js"></script>
	<script src="bower_components/snapjs/snap.js"></script>
	<script src="bower_components/responsive-elements/responsive-elements.js"></script>
	<script src="bower_components/gridforms/gridforms/gridforms.js"></script>

	<script src="js/base.js"></script>
</body>
</html>